<template>
  <div class="search-college">
    <div class="header">
      <img @click="goBack" class="back-arrow" :src="backArrow" alt="" />
      <searchBox @upDateMatchName="upDateMatchName" :matchName="matchName" />
    </div>
    <div class="btn-container">
      <div
        :class="activeRightIndex == index ? 'btn-item-active' : 'btn-item'"
        v-for="(item, index) in rightBtnList"
        :key="index"
        @click="changeRightActiveIndex(index)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="major-table">
      <div class="title">
        <div class="title-first-column">门类</div>
        <div class="title-second-column">专业类</div>
        <div class="title-third-column">专业名称</div>
        <div class="title-fourth-column">专业代码</div>
      </div>
      <div class="table" v-show="matchName == ''">
        <div class="first-column">
          <div
            :class="firstIndex == index ? 'first-item-active' : 'first-item'"
            v-for="(item, index) in firstCategoryList"
            :key="index"
            @click="changeFirstActiveIndex(item, index)"
          >
            {{ item.tagName }}
          </div>
        </div>
        <div class="second-column">
          <div
            :class="secondIndex == index ? 'second-item-active' : 'second-item'"
            v-for="(item, index) in secondCategoryList"
            :data-index="index"
            :key="index"
            @click="changeSecondActiveIndex(item, index)"
          >
            {{ item.tagName }}
          </div>
        </div>
        <div class="third-column" ref="thirdColumnRef">
          <div
            class="third-item"
            v-for="(item, index) in thirdCategoryList"
            :key="index"
            @click="jumpToMajorDetail(item, index)"
            :data-parent-id="item.parentId"
          >
            <div class="left">
              {{ item.tagName }}
              <div class="year">{{ item.tagTimeDesc }}</div>
            </div>
            <div class="right">
              {{ item.tagCode }}
            </div>
          </div>
        </div>
      </div>
      <div
        class="list"
        @scroll="debouncedListHandleScroll"
        v-show="matchName != ''"
      >
        <div
          v-if="majorList.length > 0"
          class="list-item"
          v-for="(item, index) in majorList"
          :key="index"
          @click="jumpToMajorDetail(item)"
        >
          <div class="firt-list">{{ item.topName }}</div>
          <div class="second-list">{{ item.parentName }}</div>
          <div class="third-list">{{ item.tagName }}</div>
          <div class="fourth-list">{{ item.tagCode }}</div>
        </div>
        <Empty v-else />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onActivated } from 'vue';
import backArrow from '@/assets/images/back_arrow.png';
import searchBox from '@/components/MajorSearchBox.vue';
import Empty from '@/components/Empty.vue';
import {
  getCampusTagList,
  getCampusTagTree,
  getSearchMajorList,
} from '@/api/majorSearch';

import antiShake from '@/utils/antiShake.js';

import { useRoute, useRouter } from 'vue-router';

defineOptions({
  name: 'SearchMajor',
});

const router = useRouter();
const route = useRoute();

const matchName = ref('');
const upDateMatchName = (newVal) => {
  matchName.value = newVal;
  pageNo.value = 1;
  pageSums.value = 100;
  getSearchMajorListFn();
};
const goBack = () => {
  router.go(-1);
};
const activeRightIndex = ref(0);
const rightBtnList = ref([
  {
    name: '本科',
    value: '普通本科',
  },
  {
    name: '专科',
    value: '专科（高职）',
  },
]);
const changeRightActiveIndex = (index) => {
  activeRightIndex.value = index;
  pageNo.value = 1;
  pageSums.value = 100;
  if (matchName.value == '') {
    getCampusTagListFn();
  } else {
    getSearchMajorListFn();
  }
};
const firstCategoryList = ref([]);
const firstIndex = ref(0);
const changeFirstActiveIndex = (item, index) => {
  firstIndex.value = index;
  getSecondList(item.positionTagId);
  const secondColumn = document.querySelector('.second-column');
  if (secondColumn) {
    secondColumn.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  }
};
const getCampusTagListFn = async () => {
  const params = {
    cateType: activeRightIndex.value == 0 ? 30 : 10,
  };
  const res = await getCampusTagList(params);
  if (res.code == 200) {
    firstCategoryList.value = res.data;
    firstIndex.value = 0;
    getSecondList(firstCategoryList.value[0].positionTagId);
  }
};
const secondCategoryList = ref([]);
const secondIndex = ref(0);
const getSecondList = async (positionTagId) => {
  const params = {
    cateType: activeRightIndex.value == 0 ? 30 : 10,
    searchRecommendType: 10,
    positionTagId: positionTagId,
  };
  const res = await getCampusTagTree(params);
  if (res.code == 200) {
    secondCategoryList.value = res.data;
    secondIndex.value = 0;
    thirdCategoryList.value = secondCategoryList.value[0].children;
  }
};
const changeSecondActiveIndex = (item, index) => {
  thirdCategoryList.value = secondCategoryList.value[index].children;
  secondIndex.value = index;
};
const thirdCategoryList = ref([]);

const thirdColumnRef = ref(null);

const jumpToMajorDetail = (item, index) => {
  router.push({
    name: 'MajorDetail',
    query: { ...item, matchName: matchName.value },
  });
};
const pageNo = ref(1);
const pageSums = ref(100);
const majorList = ref([]);
const getSearchMajorListFn = async () => {
  const params = {
    cateType: activeRightIndex.value == 0 ? 30 : 10,
    matchName: matchName.value,
    tagType: 10,
    tagLevel: 3,
    pageNo: pageNo.value,
    pageSize: 10,
  };
  const res = await getSearchMajorList(params);
  if (res.code == 200) {
    pageSums.value = res.pageparam.pages;
    if (pageNo.value == 1) {
      majorList.value = res.data;
    } else {
      majorList.value = [...majorList.value, ...res.data];
    }
    pageNo.value++;
  }
};

const handleScroll = () => {
  const listElement = document.querySelector('.list');
  if (listElement) {
    const { scrollTop, scrollHeight, clientHeight } = listElement;
    if (scrollTop + clientHeight >= scrollHeight - 10) {
      // 这里可以添加加载更多数据的逻辑
      if (pageNo.value <= pageSums.value) {
        getSearchMajorListFn();
      }
    }
  }
};
const debouncedListHandleScroll = antiShake(handleScroll, 300);

onMounted(() => {
  matchName.value = route.query.matchName || '';
  getCampusTagListFn();
  if (matchName.value) {
    pageNo.value = 1;
    pageSums.value = 100;
    getSearchMajorListFn();
  }
});

onActivated(() => {
  if (route.query.matchName) {
    matchName.value = route.query.matchName;
    pageNo.value = 1;
    pageSums.value = 100;
    getSearchMajorListFn();
  } else {
    matchName.value = '';
  }
  getCampusTagListFn();
});
</script>

<style lang="scss" scoped>
.search-college {
  background: linear-gradient(180deg, #e8f9ff 0%, #f4f6f8 100%);
  padding: 0 60px;
  box-sizing: border-box;
  .header {
    padding: 30px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .back-arrow {
      width: 48px;
      height: 48px;
      position: absolute;
      left: 0;
    }
  }
  .btn-item {
    width: 135px;
    height: 56px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 24px;
    color: #333333;
  }
  .btn-item-active {
    @extend .btn-item;
    color: #0b6eff;
  }
  .btn-container {
    display: flex;
    margin-left: 24px;
    justify-content: center;
  }
  .btn-container > :first-child {
    border-radius: 15px 0 0 15px;
    border-right: 1px solid #d2d2d2;
  }

  /* 第二个子元素：右上右下圆角 */
  .btn-container > :last-child {
    border-radius: 0 15px 15px 0;
  }
  .major-table {
    width: 100%;
    background: #ffffff;
    border-radius: 20px 20px 0px 0px;
    margin-top: 18px;
    .title {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 13px 0;
      background: #ffffff;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 22px;
      color: #666666;
      border-radius: 20px 20px 0px 0px;
      .title-first-column {
        width: 13.5%;
        padding-left: 66px;
      }
      .title-second-column {
        width: 30%;
        padding-left: 20px;
      }
      .title-third-column {
        width: 30%;
        padding-left: 72px;
      }
      .title-fourth-column {
        width: 26.5%;
      }
    }
    .table {
      width: 100%;
      display: flex;
      height: calc(100vh - 262px);
      .first-column {
        width: 13.5%;
        border-right: 1px solid #f6fafe;
        overflow-y: scroll;
        /* 隐藏所有浏览器滚动条 */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        &::-webkit-scrollbar {
          display: none;
        } /* Chrome/Safari/Opera */
        height: 100%;
        .first-item {
          width: 100%;
          height: 90px;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 25px;
          display: flex;
          align-items: center;
          padding-left: 65px;
          box-sizing: border-box;
        }
        .first-item-active {
          @extend.first-item;
          background: #f6fafe;
          color: #0b6eff;
        }
      }
      .second-column {
        width: 32%;
        border-right: 1px solid #f6fafe;
        overflow-y: scroll;
        /* 隐藏所有浏览器滚动条 */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        &::-webkit-scrollbar {
          display: none;
        } /* Chrome/Safari/Opera */
        height: 100%;
        .second-item {
          width: 100%;
          height: 90px;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 25px;
          display: flex;
          align-items: center;
          padding-left: 65px;
          box-sizing: border-box;
        }
        .second-item-active {
          @extend.second-item;
          background: #f6fafe;
          color: #0b6eff;
        }
      }
      .third-column {
        width: 55.5%;
        overflow-y: scroll;
        /* 隐藏所有浏览器滚动条 */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        &::-webkit-scrollbar {
          display: none;
        } /* Chrome/Safari/Opera */
        height: 100%;
        .third-item {
          background: #f6fafe;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26px;
          color: #666666;
          width: 100%;
          height: 90px;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 25px;
          display: flex;
          align-items: center;
          padding-left: 56px;
          box-sizing: border-box;
          .left {
            display: flex;
            align-items: center;
            width: 54%;
            .year {
              // width: 68px;
              padding: 0 14px;
              height: 30px;
              background: #e8f2ff;
              color: #1b87df;
              font-size: 20px;
              border-radius: 5px;
              margin-left: 10px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
          .right {
          }
        }
        .third-item-active {
          @extend.third-item;
          background: #f6fafe;
          color: #0b6eff;
          display: flex;
        }
      }
    }
    .list {
      width: 100%;
      height: 820px;
      overflow-y: scroll;
      .list-item {
        width: 100%;
        display: flex;
        height: 90px;
        align-items: center;
        font-size: 26px;
        color: #666666;
        .firt-list {
          width: 13.5%;
          padding-left: 66px;
        }
        .second-list {
          width: 30%;
          padding-left: 20px;
        }
        .third-list {
          width: 30%;
          padding-left: 70px;
          display: flex;
          align-items: center;
        }
        .fourth-list {
          width: 26.5%;
        }
      }
    }
  }
}
</style>
